<template>
  <div>
    <el-card shadow="never" style="margin: 30px">
      <div slot="header">
        <span>新增</span>
      </div>
      <el-form
        :model="newlist"
        ref="form"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-row :gutter="24">
          <el-col :span="8" :offset="0">
            <el-form-item label="标题">
              <el-input v-model="newlist.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="作者">
              <el-input v-model="newlist.author"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="是否最热">
              <el-select v-model="newlist.hot" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16" :offset="4">
            <el-form-item label="内容描述">
              <el-input
                type="textarea"
                :rows="8"
                v-model="newlist.desc"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="封面图片">
              <el-upload
                ref="upload"
                class="upload-demo"
                :action="serveHost + '/admin/xy/upload/uploadImg'"
                :headers="headers"
                :on-success="onUploadSucc"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
              <img class="img1" :src="newlist.cover" alt="" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="类型">
              <el-radio v-model="newlist.type" label="0">富文本</el-radio>
              <el-radio v-model="newlist.type" label="1">markdown</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0"></el-col>
          <el-col :span="6" :offset="0"></el-col>
          <el-col :span="24" :offset="0">
            <el-form-item>
              <el-button type="primary" @click="add">立即添加</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <Tintmce
      ref="tin"
      v-model="tinContent"
      :uploadurl="serveHost + '/admin/xy/upload/uploadImg'"
    ></Tintmce>
    <el-button type="primary" size="default" @click="getTin"
      >获取富文本内容</el-button
    >
    <el-button type="primary" size="default" @click="setTin"
      >设置富文本内容</el-button
    >
    <hr />
    <!-- <Markdown></Markdown> -->
  </div>
</template>

<script>
import Tintmce from "@/components/Tinymce/index";
import NewsApi from "@/api/news/news";
import { getToken } from "@/utils/mysuth";
//import Markdown from "@/components/MarkdownEditor/index"
import settingsFile from "@/settings";
export default {
  components: {
    Tintmce,
  },
  data() {
    return {
      id: "",
      serveHost: settingsFile.host,
      tinContent: "",
      newlist: {
        cover: "",
        title:''
      },
      options: [
        {
          value: "0",
          label: "正常",
        },
        {
          value: "1",
          label: "最热",
        },
      ],

      fileList: [],
    };
  },
  created() {
    this.id = this.$route.params.id;
    console.log(this.id);
    this.tinContent = '<h2 style="color:green">真不错,真漂亮,真绿</h2>';
    if(this.id){
     this.getlist() 
    }

  },
  computed: {
    headers() {
      return {
        "bufan-token": getToken(),
      };
    },
  },
  methods: {
    getTin() {
      console.log("富文本内容:", this.tinContent);
    },
    setTin() {
      this.tinContent = this.$refs.tin.setContent(
        '<h2 style="color:green;">又绿又不错</h2>'
      );
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    add() {
      var api ='';
      if(this.id){
        api=NewsApi.newsupdate
      }else{
        api=NewsApi.newssave
      }
      api({ xyNews: { ...this.newlist } }).then((res) => {
        this.$router.push({name:'materialNews'})
      });
    },
    getlist() {
      NewsApi.newsdetail({ id: this.id }).then((res) => {
     
        this.newlist=res.data
      });
    },
    onUploadSucc(response, file, fileList) {
      console.log(response);
      this.newlist.cover = this.serveHost + "/" + response.url;
      // 上传成功之后提示,并删除进度条
      this.$message.success("上传成功!");
      this.$refs.upload.clearFiles();
    },
  },
};
</script>
<style scoped  lang='scss'>
.img1 {
  width: 100px;
  height: 100px;
}
</style>